<template>
	<view class="result-container">
		<view class="result-content">
			<view class="icon-wrapper">
				<image v-if="paymentSuccess" src="http://101.200.154.121:19000/teacher-manage-static/static/success-icon.png" mode="aspectFit" class="status-icon"></image>
				<image v-else src="http://101.200.154.121:19000/teacher-manage-static/static/fail-icon.png" mode="aspectFit" class="status-icon"></image>
			</view>
			<view class="status-text">{{ paymentSuccess ? '支付成功' : '支付失败' }}</view>
			<view class="order-info" v-if="orderNo">
				<text class="label">订单编号：</text>
				<text class="value">{{ orderNo }}</text>
			</view>
			<view class="amount-info" v-if="amount">
				<text class="label">支付金额：</text>
				<text class="value">¥{{ amount }}</text>
			</view>
			<view class="button-group">
				<button class="primary-btn" @tap="viewOrder">查看订单</button>
				<button class="secondary-btn" @tap="backToHome">返回首页</button>
			</view>
		</view>
	</view>
</template>

<script>
import { payApi } from '@/api/pay.js'

export default {
	data() {
		return {
			paymentSuccess: false,
			orderNo: '',
			amount: '',
			tradeNo: '' // 支付宝交易号
		}
	},
	
	onLoad(options) {
		console.log('支付结果页面参数：', options)
		
		// 解析支付宝同步返回的参数
		if (options) {
			this.orderNo = options.out_trade_no || ''
			this.tradeNo = options.trade_no || ''
			
			// 验证支付状态
			this.checkPaymentStatus()
		}
	},
	
	methods: {
		async checkPaymentStatus() {
			if (!this.orderNo) {
				return
			}
			
			try {
				const res = await payApi.queryPayStatus(this.orderNo)
				if (res.code === 200) {
					this.paymentSuccess = res.data.paid
					if (res.data.amount) {
						this.amount = res.data.amount
					}
				}
			} catch (error) {
				this.paymentSuccess = false
			}
		},
		
		viewOrder() {
			uni.redirectTo({
				url: '/pages/customer-service/index'
			})
		},
		
		backToHome() {
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
	}
}
</script>

<style>
.result-container {
	min-height: 100vh;
	background-color: #f5f6fa;
	padding: 40rpx;
}

.result-content {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.icon-wrapper {
	margin-bottom: 30rpx;
}

.status-icon {
	width: 120rpx;
	height: 120rpx;
}

.status-text {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 40rpx;
}

.order-info,
.amount-info {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: 20rpx;
}

.label {
	color: #666;
	font-size: 28rpx;
}

.value {
	color: #333;
	font-size: 28rpx;
	margin-left: 10rpx;
}

.button-group {
	margin-top: 60rpx;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.primary-btn,
.secondary-btn {
	width: 100%;
	height: 88rpx;
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
}

.primary-btn {
	background-color: #1890ff;
	color: #fff;
}

.secondary-btn {
	background-color: #f5f6fa;
	color: #666;
}
</style> 